Creating a Custom Web Part: A Simple Example

  • Article

After you create a custom URL in Microsoft® Office Project Web Access, you can use that URL in a Web Part to make a page that is available in Microsoft® Windows® SharePoint™ Services. The topics URL Options: Modifying the Query String Parameters and URL Options: View Variables describe how to create and save a custom URL. This topic shows a simple example of how to make a custom Web Part Page that shows Project Server data for a specific project. The steps appear long only because they are explained in detail; the example is really very simple.

There are essentially three steps to creating a custom Web Part Page:

  • Create the URL for the project data you want to show.
  • Create a document library in Windows SharePoint Services for Microsoft Office Project Server Web Part Pages.
  • Create a Web Part Page, add a Web Part to the page, and add the URL to the Web Part.

The section Using the Web Part Page in this topic also shows how to use and modify your personal view of a Web Part Page in Project Web Access for this simple example, and how to import and use the Web Part Page in Windows SharePoint Services. For more information, see the topic Installing and Using Web Parts.

Note  Project Web Access simply hosts the Windows SharePoint Services Web Part page. You can extend Project Web Access by using URL options or by developing custom Active Server Page (ASP) pages. You extend Windows SharePoint Services with custom Web Parts and Web Part Pages.

The following examples use Project Web Access views of the default Project Server 2003 sample database, in the virtual directory http://ServerName/Sample.

Note  If you are using the Project Server sample database for the first time, you will need to open a project in Microsoft Office Project Professional 2003. On the Collaborate menu, click Publish, and then click All Information. You can then close the project and exit Project Professional.

To create the URL:

  1. On the Project Web Access menu bar, click Resources. In the Actions pane on the left, click View resource assignments.

  2. On the View resource assignments page, in the Available resources list, press CTRL and click Brad Sutton and Steve Masters. Click Add to show them in the Resources to display list, and then click Apply.

  3. Add the options ?GanttView=0&SimpleUI=117 that are shown in bold in the following URL in the browser's Address list box (the options are not case-sensitive):

    http://ServerName/Sample/Views/WebclientView.asp?GanttView=0&SimpleUI=117

    The Project Web Access view now shows the grid view in the right pane. The view has no menu, Actions pane, title elements, or grid buttons. If there are any icons for risks, issues, and documents in the Indicators column, they are disabled; that is, clicking an indicator icon does not take you to the associated Windows SharePoint Services site.

  4. Open Notepad or another text editor. Click the URL in the browser's Address list box to select it all, copy it, paste the URL into Notepad, and then save the Notepad file for later use.

Note  You could make many more adjustments to the view. For example, set SimpleUI to 85 to get the grid buttons back, and then save the long URL as a shortcut link and use that as a basis for the Web Part URL.

To create a document library for Project Server Web Part Pages:

  1. If you are still in the View resource assignments page in Project Web Access, reset the default view by setting GanttView=-1 and SimpleUI=0 in the URL.

  2. On the Project Web Access menu bar, click Documents. On the View and upload documents in all projects page, click a project that has been published to the Web from Project Professional.

  3. On the View and Upload Documents page, click Create Document Library. This will be a library for the project you selected; however, you can later export documents from this library and import them into a shared or public library.

  4. On the New Document Library page, type a name for the document library, and a description if you want. In the Navigation section, click Yes to display this document on the Quick Launch bar. In the Document Versions section, click No for this test document.

    Click the Document Template drop-down list box and select Web Part Page as the default template for new files created in this library.

  5. Click Create.

To create the custom Web Part Page:

  1. In your new document library page, click New Document.

  2. On the New Web Part Page, you can name the page and choose a layout template. For example, type CustomAssignments in the Name text box. The page will become CustomAssignments.aspx. In the Choose Layout Template list, click Header, Left Column, Body. Click Create.

  3. In the new CustomAssignments page you just created, click Modify Shared Page in the top right section of the page, and then click Modify Shared Web Parts and click Web Part Page Title Bar.

  4. In the Web Part Page Title Bar pane, type a space in the title so it becomes Custom Assignments. In the Caption text box, type Test Project Server Web Parts page. Link to your own image file if you want, and click Apply to see how it looks. When you are finished changing the title bar, click OK.

  5. Click Modify Shared Web Parts again, click Add Web Parts, and then click Browse. Click your selected project's gallery. With the default installation, the Add Web Parts pane shows there are about 20 Web Parts in the gallery. In the Web Part List, click Links and drag it to the Left Column section on your page.

  6. Click Next in the Web Part List, click Page Viewer Web Part, and drag it to the Body section on your page.

    Note  If you want to remove a Web Part from the page while you are in the Design view, click X (the Close button) in the top right of the Web Part.

  7. In the Page Viewer Web Part you just added to the page, click open the tool pane. In the Page Viewer Web Part pane on the right, click the Web Page option for the type of page to display. Now open the text file you previously saved with the custom URL, copy the URL, and paste it into the Link text box. Click Test Link. A new browser window opens with the Project Server custom URL you made for the Assignments view. Close the test browser window.

  8. Back in the Page Viewer Web Part pane, click Apply. The assignments view now shows in the Body section of your page.

  9. Expand the Appearance section of the Page View Web Part pane and type a title for your Web Part display. For example, type Assignments Work Sheet. In the Height section, click Yes for a fixed height, and make the height 5 inches (or whatever you choose). Click OK. Leave the Header section on your page empty for now.

    The following figure shows an example of the Web Part Page you just created.

    Custom Assignments Web Part page

Using the Web Part Page

You can use and modify the Web Part Page from Windows SharePoint Services. You can also view the Windows SharePoint Services page from Project Web Access. The custom page template included a header section, but you did not add a Web Part to the header. You can modify the page for your personal view, without affecting it in a shared view, by adding your personal Web Part or setting options on the existing Web Parts.

To use the Web Part Page in Project Web Access:

  1. On the Project Web Access menu bar, click Documents, and then click the project name and the document library where you stored the page.

  2. In the document library, click the CustomAssignments document to open it. Click Modified Shared Page, and in the drop-down menu, click Personal View. The drop-down menu name changes to Modify My Page; click this name, click Add Web Parts, and then click Browse.

  3. Now browse the Web Part galleries as you previously did, and add any Web Part you want to the Header section. For example, add an Image Web Part and select your own image file to show in the Web Part. You can also add additional Web Parts to the other sections. The following figure shows how you can click open the tool pane to customize the Image Web Part with your own image.

    Customizing the Header section, for your personal view of a Web Part

  4. If you want to save the Web Part Page for backup or to import into other libraries, right-click the CustomAssignments document, and on the Option menu, click Save Target As to save the CustomAssignments.aspx file in a directory of your choice.

    Now when you open the CustomAssignments document, the page will show your custom header. When someone else opens the same document, they will see an empty Header section.

To use the Web Part Page in Windows SharePoint Services:

  1. On the Project Web Access menu bar, click Admin. Click Manage Windows SharePoint Services. On the Connect to SharePoint server page, click the URL for public document in the section Enter information on the Web server running Windows SharePoint Services. For example:

    http://WSSServerName:5555/sites/MS_ProjectServer_PublicDocuments

  2. In the Project Workspace Home page, click Documents and Lists in the menu bar.

  3. On the Documents and Lists page, under Document Libraries, click Shared Documents. Click Upload Document, and then click Browse. In the Choose file dialog box, click the CustomAssignments.aspx that you previously exported, and then click Open. Click Save and Close; the CustomAssignments document is now in Shared Documents for the Project Workspace.

    You are now viewing the Custom Assignments Web Part Page that shows Project Server data on Windows SharePoint Services. The URL is:

    http://WSSServerName:5555/sites/MS_ProjectServer_PublicDocuments/Shared%20Documents/CustomAssignments.aspx

    Note  Windows SharePoint Services ignores the SimpleUI and other URL parameters that you used with Project Web Access.